import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import useDeviceDetector from '../useDeviceDetector';
import mobileLogoPng from './assets/logo.png';
import childMenu from './assets/child-menu.png';
import MenuSvg from './assets/menu.svg?react';
import i18n from "@/i18n";
import './index.css';

export default function Navigation() {
    const [lng, setLng] = useState('');
    useDeviceDetector();
    const [open, setOpen] = useState(false);
    const [childMenuOpen, setChildMenuOpen] = useState(false);
    const { t } = useTranslation();

    const handleChangeLan = useCallback(
        () => {
            if (lng === 'zh') {
                setLng('en');
                i18n.changeLanguage("en");
                localStorage.setItem('i18nextLng', 'en');
            } else {
                setLng('zh');
                i18n.changeLanguage("zh");
                localStorage.setItem('i18nextLng', 'zh');
            }
        },
        [lng]
    );

    const handleOpenMenu = useCallback(
        (e: { stopPropagation: () => void; }) => {
            e.stopPropagation();
            setOpen(!open);
        },
        [open]
    );

    const handleOpenChildMenu = useCallback(
        (e: { stopPropagation: () => void; }) => {
            e.stopPropagation();
            setChildMenuOpen(!childMenuOpen);
        },
        [childMenuOpen]
    );


    useEffect(
        () => {
            //查看是否存在默认语言
            const lang = localStorage.getItem('i18nextLng');
            if (lang) {
                setLng(lang)
                i18n.changeLanguage(lang)
            } else {
                localStorage.setItem('i18nextLng', 'zh');
                i18n.changeLanguage("zh")
            }
        },
        []
    );

    useEffect(
        () => {
            const handleClick = () => {
                setOpen(false);
                setChildMenuOpen(false);
            };
            window.addEventListener('click', handleClick);
            return () => {
                window.removeEventListener('click', handleClick);
            };
        },
        []
    );

    return (
        <div className="mobile-navigation-layout">
            <Link to="/mobile">
                <img src={mobileLogoPng} alt="logo" className="mobile-navigation-layout-logo" />
            </Link>
            <div className="mobile-navigation-menu-layout">
                <MenuSvg
                    className={`${open ? 'active' : ''} mobile-navigation-layout-menu`}
                    onClick={handleOpenMenu}
                />
                <div className={`mobile-navigation-popover ${open ? 'active' : ''}`}>
                    <div className="mobile-navigation-popover-item" onClick={handleOpenChildMenu}>
                        <div>{t('知识科普')}</div>
                        <img
                            className={`mobile-navigation-popover-item-child-icon ${childMenuOpen ? 'open' : ''}`}
                            src={childMenu}
                            alt=""
                        />
                    </div>
                    {childMenuOpen && (
                        <div className="mobile-navigation-popover-child-menu">
                            <Link to="/mobile/knowledge/encyclopedia">
                                <div className="mobile-navigation-popover-item">
                                    <span>{t('疾病百科')}</span>
                                </div>
                            </Link>
                            <Link to="/mobile/knowledge/faq">
                                <div className="mobile-navigation-popover-item">
                                    <span>{t('答疑释惑')}</span>
                                </div>
                            </Link>
                            <Link to="/mobile/knowledge/media">
                                <div className="mobile-navigation-popover-item">
                                    <span>{t('媒体资源')}</span>
                                </div>
                            </Link>
                        </div>
                    )}
                    <Link to="/mobile/vision-test">
                        <div className="mobile-navigation-popover-item">
                            <span>{t('辨色测试')}</span>
                        </div>
                    </Link>
                    <Link to="/mobile/knowledge/media">
                        <div className="mobile-navigation-popover-item">
                            <span>{t('专家支持')}</span>
                        </div>
                    </Link>
                    <Link to="/mobile/project">
                        <div className="mobile-navigation-popover-item">
                            <span>{t('项目介绍')}</span>
                        </div>
                    </Link>
                    <Link to="/mobile/connect-us">
                        <div className="mobile-navigation-popover-item">
                            <span>{t('联系我们')}</span>
                        </div>
                    </Link>
                    <div className="mobile-navigation-popover-item" onClick={handleChangeLan}>
                        <span>{lng === 'zh' ? 'English' : '中文'}</span>
                    </div>
                </div>
            </div>
        </div>
    );
}
